<template>
  <div class="app-container">
    <Find :searchImg="false" @Launchform="Launchform6" :formList="formList1" />

    <el-card style="margin-top: 15px" shadow="always" :body-style="{ padding: '20px' }">
      <el-button type="primary" size="default" @click="upload">交期变更</el-button>

      <Table :isLoading="isLoading" :tableHeader="tableHeader" :tableData="InstructionCreationMehtodsTableDate" selection :TableHeight="97" />
      <PageModule :PageData="{ buttonS: true, total: totalL }" :layout="'prev, pager'" @pageChange="pageChangeL" @pageSizeChange="pageSizeChangeL" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'InstructionCreation'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { FormQuery, importDeliver, SeasonalEcho } from '@/api/Control/WEB/InstructionCreation'
import { ElMessage, ElMessageBox } from 'element-plus'
const totalL = ref(0)

const imgList = ref<any>([])

const SeasonalEchoMehtods = async () => {
  const result = await SeasonalEcho()
  formList1.value[5].selectOptions = EvaluatesTheArrayReturnValue(result)
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const upload = () => {
  const fileType = ['xls', 'xlsx']

  const inputFile = document.createElement('input')

  const maxFileSizeMb = 2

  const maxFilesSizeBytes = maxFileSizeMb * 1024 * 1024

  inputFile.type = 'file'

  inputFile.style.display = 'none'

  document.body.appendChild(inputFile)

  inputFile.addEventListener('change', function () {
    const files = inputFile.files as any // 获取文件数组

    const file = files[0] // 获取第一个文件对象

    const fileExtension = file.name.split('.').pop()

    if (!fileType.includes(fileExtension as any)) {
      JMessage.warning('上传的文件格式只能是 xls, xlsx')
      document.body.removeChild(inputFile)
      return false
    }

    if (file.size > maxFilesSizeBytes) {
      JMessage.warning('文件大小不能超过2MB!!!')
      document.body.removeChild(inputFile)
      return
    }

    const formData = new FormData()

    formData.append('file', file) // 添加文件对象及文件名

    importDeliverMethods(formData)
  })

  inputFile.click()
}

const importDeliverMethods = async (formData: any) => {
  try {
    const result = await importDeliver(formData)
    if (result.code === 200) {
      InstructionCreationMehtods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('上传失败')
  }
}

const pageChangeL = (val: any) => {
  FormQueryParms.value.pageNum = val
  InstructionCreationMehtods()
}

const pageSizeChangeL = (val: any) => {
  FormQueryParms.value.pageSize = val
  InstructionCreationMehtods()
}
// 表格查询
const InstructionCreationMehtodsTableDate = ref([])

const isLoading = ref(false)

const FormQueryParms = ref<any>({
  checkEndDate: '',
  checkStartDate: '',
  color: '',
  colorCode: '',
  custom: '',
  customPo: '',
  cutNo: '',
  deliveryEndDate: '',
  deliveryStartDate: '',
  developmentNo: '',
  generateFlag: '',
  lastNo: '',
  lotNo: '',
  moldNo: '',
  orderEndDate: '',
  orderStartDate: '',
  pageNum: 1,
  pageSize: 40,
  season: '',
  soleVendor: '',
  status: '',
  style: '',
  styleType: ''
})

const InstructionCreationMehtods = async () => {
  isLoading.value = true
  try {
    const result = await FormQuery(FormQueryParms.value)
    InstructionCreationMehtodsTableDate.value = result.styleDetails.map((item: any) => {
      if (item.cfmFlag === 'Y') {
        item.cfmFlag = true
      }
      return item
    })
    totalL.value = result.total
    imgList.value = result.styleDetails.map((item: any) => {
      return item.photoPath
    })
    console.log(imgList)
  } catch (error) {
    JMessage.error('表格查询出错')
  }
  isLoading.value = false
}

onMounted(() => {
  InstructionCreationMehtods()

  SeasonalEchoMehtods()
})

const Launchform6 = (row: any) => {
  FormQueryParms.value.lotNo = row[0].inputValue
  FormQueryParms.value.style = row[1].inputValue
  FormQueryParms.value.orderStartDate = row[2].dateValue[0]
  FormQueryParms.value.orderEndDate = row[2].dateValue[1]
  FormQueryParms.value.deliveryStartDate = row[3].dateValue[0]
  FormQueryParms.value.deliveryEndDate = row[3].dateValue[1]

  FormQueryParms.value.season = row[5].selectValue
  FormQueryParms.value.custom = row[6].inputValue
  FormQueryParms.value.cutNo = row[7].inputValue
  FormQueryParms.value.moldNo = row[8].inputValue
  FormQueryParms.value.soleVendor = row[9].inputValue
  FormQueryParms.value.lastNo = row[10].inputValue
  FormQueryParms.value.customPo = row[11].inputValue
  FormQueryParms.value.developmentNo = row[12].inputValue
  if (row[4].selectValue === '3') {
    FormQueryParms.value.status = null
  } else {
    FormQueryParms.value.status = row[4].selectValue
  }
  InstructionCreationMehtods()
}

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工厂型体',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '客人交期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '检核状态',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '2',
        optionLabel: '所有'
      },
      {
        optionKey: '2',
        optionValue: '1',
        optionLabel: '已检核'
      },
      {
        optionKey: '3',
        optionValue: '3',
        optionLabel: '未检核'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '季节',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '冲刀',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '底模',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '大底厂商',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '楦头',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '合同号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '客人货号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const tableHeader = ref([
  {
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    type: 'img',
    srcList: imgList
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '品牌',
    prop: 'custom'
  },
  {
    label: '客户',
    prop: 'brand'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },

  {
    label: '冲刀',
    prop: 'cutNo'
  },
  {
    label: '底模',
    prop: 'moldNo'
  },
  {
    label: '楦头',
    prop: 'lastNo'
  },
  {
    label: '季度',
    prop: 'season'
  },

  {
    label: '下单日期',
    prop: 'orderDate'
  },

  {
    label: '客人',
    prop: 'stitchUnin'
  },

  {
    label: '客人交期',
    prop: 'deliveryDate'
  },

  {
    label: '变更交期',
    prop: 'newdeliveryDate'
  },

  {
    label: '订单数',
    prop: 'orderQty'
  },
  {
    label: '预补数',
    prop: 'surplusQty'
  },

  {
    label: '基本码',
    prop: 'baseSize'
  },
  {
    label: '中间码',
    prop: 'mSize'
  },
  {
    label: '检核状态',
    prop: 'cfmFlag',
    type: 'checkbox'
  },
  {
    label: '指令生成状态',
    prop: 'generateFlag'
  }
])
</script>

<style lang="less" scoped></style>
